<!DOCTYPE html>
<html>
<head>
	<title>vue实例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		
		
	</style>
</head>
<body>
	<div id="app">

		<!-- 组件里的methods中的count方法一旦执行，即被点击的组件里的nunber加1，语句继续执行，this.$emit("change")执行，向上传递了一个信息，该组件发生了change事件
		由于在dom中<counter>中都有一个事件监测，当发生change事件时，会触发根实例中的handle函数，
		进而使total发生改变 -->

		<!-- 这里的重点是注意$emit()的用法，非常重要 -->
		<counter v-on:change="handle" ref = "one1"></counter>
		<counter v-on:change="handle" ref = "one2"></counter>
		<div>{{total}}</div>

	
		
	
	</div>




</body>
<script type="text/javascript">

	Vue.component("counter",{

		data:function() {
			return {
				number:0
			}
		},
		methods: {
			count:function() {
				this.number++;
				this.$emit('change');//发布change事件
			}
		},
		template:"<div @click='count'>{{number}}</div>"
	})

	var vm = new Vue({
		el:"#app",
		data:{
			total:0
		},
		methods:{
			handle:function() {
				this.total = this.$refs.one1.number + this.$refs.one2.number;
				
			}
		}
		

		
		
		

	})



		
</script>
</html>